<%@page import="java.awt.Button"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@page import="java.util.ArrayList"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Quản lý thông tin nhân viên</title>

</head>
<body>

	<br>
	<br>
	<br>
		<fieldset>
			<legend>Site Search</legend>
			<input id="staffkeyword" type="text" value="Tìm kiếm thông tin nhân viên"
				onfocus="if (this.value == 'Tìm kiếm thông tin nhân viên') {this.value = '';}"
				onblur="if (this.value == '') {this.value = 'Tìm kiếm thông tin nhân viên';}" />
			<input type="button"  id="searchstaff" value="Tìm kiếm" />
			<span id="staffnamesearch-error" style="color:red"> </span>
		</fieldset>
		<h1 style="color: blue;">QUẢN LÝ NHÂN VIÊN</h1>
		<div id=".tableview" align="center" style="width: 200px">
		<center>
		
			<table class="table1" id="stafftable" style="width: 200px">
				<tr>
					<th scope="col" abbr="Starter">Mã nhân viên</th>
					<th scope="col" abbr="Starter">Tên nhân viên</th>
					<th scope="col" abbr="Starter">Ngày sinh</th>
					<th scope="col" abbr="Starter">Số CMND</th>
					<th scope="col" abbr="Starter">Địa chỉ</th>
					<!-- <th scope="col" abbr="Starter">Điện thoại</th> -->
					<th scope="col" abbr="Starter">Giới tính</th>
					<th scope="col" abbr="Starter">Email</th>
					<th scope="col" abbr="Starter">Chức vụ</th>
					<!-- <th scope="col" abbr="Starter">Lương</th>	 -->
					<th scope="col" abbr="Starter">Phòng ban</th>
					<th scope="col" abbr="Starter"></th>
					<th scope="col" abbr="Starter"></th>
				</tr>

				<c:forEach items="${staffModel.staffDTOs}" var="staff"
					varStatus="status">
					<tr class="<c:if test="${status.count % 2 == 0}">even</c:if>">
						<td>${staff.id}</td>
						<td>${staff.fullName}</td>
						<td>${staff.birthDay}</td>
						<td>${staff.identifyNumber}</td>
						<td>${staff.address}</td>
						<%-- <td>${staff.telNumber}</td> --%>
						<td>${staff.sex}</td>
						
						<td>${staff.email}</td>
						<td>${staff.positionName}</td>
						<%-- <td>${staff.income}</td> --%>
						<td>${staff.roomName}</td>

						<td><a id="editstaff"  
							href="#" onclick="updateStaff(${staff.id})"><img src="<c:url value="/resources/images/edit-icon.png"/>" /></a></td>
						<td><a id="deletestafflink"
							href="#" onclick="deleteStaff(${staff.id})">
								<img src="<c:url value="/resources/images/delete-icon1.png"/>" /> </a></td>
					</tr>
				</c:forEach>

			</table>
			</center>
			<div id="staffpaging"></div>
			<script type="text/javascript">
       			var pager = new Pager('stafftable', 7);
       			pager.init();
      			pager.showPageNav('pager', 'staffpaging');
       			pager.showPage(1);
			</script>
			<a href="#"><input class="button" id="addstaff" type="button" 
						value="Thêm"></a> 
			</div>
</body>
</html>